<template>
	<view class="container">
		<view class="header">
			<view class="headimg"><image :src="HeadImg==''?'/static/zhifa.png':HeadImg" mode="aspectFit"/></view>
			<view class="info">
				<view class="realname">绑 定 车 辆：<text style="padding-left:6rpx;">{{MemberCarList.length}} 辆</text></view>
				<view class="realname">未处理违法：{{ViolateCount}} 条</view>
			</view>
		</view>
		<view class="bindcar" v-if="MemberCarList.length==0">
			<view class="tip">绑定车牌后可快速查询车辆的违停记录，并可以实时接收到车辆违停提醒</view>
			<view class="car">
				<view class="carimg"><image src="/static/carimg.png" mode="aspectFit"/></view>
				<view class="bind" @click="BindCar()"> + 绑定车牌</view>
			</view>
		</view>
		<view class="bindlist" v-else>
			<view class="scroll" :style="'width:'+ (MemberCarList.length+1)*350 + 'rpx'">
				<view class="car" v-for="item in MemberCarList" @click="CarInfo(item.ID)">
					<view class="carimg"><image src="/static/carimg.png" mode="aspectFit"/></view>
					<view class="carnum">{{item.CarNum}}</view>
					<view class="nohandle">未处理违停<text :style="item.ViolateCount>0?'color:#e40f1a':''">（{{item.ViolateCount}}）</text></view>
					<view class="gopay">查看详情>></view>
				</view>
				<view class="car">
					<view class="carimg"><image src="/static/carimg.png" mode="aspectFit"/></view>
					<view class="bind" @click="BindCar()"> + 绑定车牌</view>
				</view>
			</view>
		</view>
		<template v-if="MemberCarList.length==0">
			<view class="power">绑定车牌，享有更多权利</view>
		</template>
		<template v-else>
			<view class="power" v-if="ViolateCount==0">温馨提示: 您没有未处理的违停信息，请继续保持!</view>
			<view class="power" v-else>温馨提示: 您有 {{ViolateCount}} 条未处理的违停信息，请及时处理!</view>
		</template>
		<view class="service">
			<view class="title">服务窗口</view>
			<view class="list">
				<view class="square" @click="ParkList()">
					<view class="name">
						<view class="bigtitle">违停查询</view>
						<view class="subtitle">点击查询>></view>
					</view>
					<view class="icon"><image src="/static/weitingchaxun.png" mode="aspectFit"/></view>
				</view>
				<view class="square" @click="MemberInfo()">
					<view class="name">
						<view class="bigtitle">账户信息</view>
						<view class="subtitle">点击查看>></view>
					</view>
					<view class="icon"><image src="/static/memberinfo.png" mode="aspectFit"/></view>
				</view>
				<view class="square hidden" @click="FirstFree()">
					<view class="name">
						<view class="bigtitle">首违免罚</view>
						<view class="subtitle">点击申请免罚>></view>
					</view>
					<view class="icon"><image src="/static/shouweimianfa.png" mode="aspectFit"/></view>
				</view>
			</view>
		</view>
		<view class="service">
			<view class="title">处理窗口</view>
			<view class="line" @click="HandleWindow()"><view class="icon"><image src="/static/chuangkouchaxun.png"/></view><view class="name">处理窗口查询</view></view>
			<view class="line" @click="HandleAddress()"><view class="icon"><image src="/static/lingqudidian.png"/></view><view class="name">凭证领取地点</view></view>
			<a href="tel:0396-2923232">
			<view class="line"><view class="icon"><image src="/static/fuwurexian.png"/></view><view class="name">服务热线（0396-2735898）</view></view>
			</a>
			<view class="line" @click="HandleNews()"><view class="icon"><image src="/static/bangzhu.png"/></view><view class="name">帮助</view></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				HeadImg:'',
				ViolateCount:0,
				MemberCarList:[]
			};
		},
		onLoad(options) {
			//uni.setStorageSync("Token","d9559cfb6fe64c7784eaa34d6e3098a0");
			if(options.Token){
				uni.setStorageSync("Token", options.Token);
			}
		},
		onShow() {
			this.Init_Home();
		},
		methods:{
			BindCar(){
				// uni.navigateTo({
				// 	url:'bindcar?ID=0'
				// })
				window.location.href="http://test.qiyedaishu.com/card.aspx";
			},
			CarInfo(ID){
				uni.navigateTo({
					url:'carinfo?ID='+ID
				})
			},
			ParkList(){
				uni.navigateTo({
					url:'parklist?CarNum='
				})
			},
			FirstFree(){
				this.Util.Toast("首违免罚尚未开放");
			},
			MemberInfo(){
				uni.navigateTo({
					url:'memberinfo'
				})
			},
			HandleWindow(){
				uni.navigateTo({
					url:'handle_window'
				})
			},
			HandleAddress(){
				uni.navigateTo({
					url:'handle_address'
				})
			},
			HandleNews(){
				uni.navigateTo({
					url:'handle_news'
				})
			},
			Init_Home(){
				var data = {};
				data.Act = "Init_Home";
				this.Util.Loading("请稍候...");
				this.Util.Member(data, json=>{
					this.Util.HideLoading();
					if(json.State){
						this.MemberCarList=json.Data.MemberCarList;
						this.ViolateCount=json.Data.ViolateCount;
						this.HeadImg=json.Data.HeadImg;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{background-color:#f6f9fe;}
	.container{width:100%; padding-bottom:50rpx;
		.header{width:100%; height:340rpx; z-index:1;  padding-top:50rpx; display: flex; flex-direction: row; background-image: url(../../static/bluebg.png); background-size: 100% 100%; background-repeat: no-repeat;
			.headimg{width:120rpx; height:120rpx; margin-left:50rpx;
				image{width:120rpx; height:120rpx; border:5rpx solid #ffffff; border-radius:50%; overflow:hidden;}
			}
			.info{flex:1; color:#ffffff; font-size:40rpx; 
				.realname{width:100%; height:60rpx; line-height: 60rpx; padding-left:30rpx; font-size:32rpx;}
				.unit{width:100%; height:44rpx; line-height: 44rpx; padding-top:10rpx; padding-left:30rpx; font-size:34rpx;}
			}
		} 
		.bindcar{width:700rpx; height:300rpx; border-radius: 20rpx; display: flex; flex-direction: row; background-color: #ffffff; margin-left:25rpx; margin-top:-130rpx; padding:30rpx;
			.tip{width:400rpx; height:200rpx; line-height: 60rpx; margin-top:30rpx; font-size:32rpx; color:#606060; }
			.car{width:300rpx; height:200rpx; text-align: center;
				.carimg{width:120rpx; height:120rpx; margin:0 auto; margin-top:10rpx; text-align: center; border-radius: 60rpx; padding-top:30rpx; background-color: #eef2fe; image{width:60rpx; height: 60rpx;}}
				.bind{width:220rpx; height:70rpx; margin:0 auto;  margin-top:20rpx; line-height: 70rpx; border-radius: 40rpx; text-align: center; font-size:32rpx; color:#ffffff; background-color: #2a5be4; border:1rpx solid #0a43e3;}
				.bind:active{opacity: 0.7;}
			}
		}
		.bindlist{width:700rpx; height:300rpx; margin-left:25rpx; margin-top:-130rpx; padding:20rpx; overflow-x: auto;
			.scroll{width:auto; height:260rpx; overflow-y: hidden;
				.car{width:310rpx; height:260rpx; margin-right:40rpx; text-align: center; background-color: #ffffff; display:inline-block; border-radius: 20rpx; float:left; display: flex; flex-direction: column;
					.carimg{width:100rpx; height:100rpx; margin:0 auto; margin-top:15rpx; text-align: center; border-radius: 60rpx; padding-top:20rpx; background-color: #eef2fe; image{width:60rpx; height: 60rpx;}}
					.carnum{font-size:30rpx; font-weight: bold; height:50rpx;}
					.nohandle{width:auto; height:40rpx; padding-left:10rpx; padding-right: 10rpx; background-color: #eef2fe; text-align: center; font-size:28rpx; border-radius:10rpx; margin:0 auto;}
					.gopay{color:#fe653c; font-size:28rpx; padding-top:10rpx;}
					.bind{width:220rpx; height:70rpx; margin:0 auto;  margin-top:20rpx; line-height: 70rpx; border-radius: 40rpx; text-align: center; font-size:32rpx; color:#ffffff; background-color: #2a5be4; border:1rpx solid #0a43e3;}
					.bind:active{opacity: 0.7;}
				}
			}
		}
		.power{width:100%; height: 60rpx; padding-top:10rpx; text-align: center; color:#e40f1a; }
		.service{width:700rpx; height:auto; margin-left:25rpx; margin-bottom: 20rpx;
			a{text-decoration: none; color:#000000;}
			.title{width:100%; height:40rpx; border-left: 8rpx solid #0a43e3; padding-left:10rpx; font-size:34rpx; font-weight: bold;}
			.list{width:100%; height: 170rpx; margin-top:20rpx; display: flex; flex-direction: row; justify-content: space-between;
				.square{width:340rpx; height:160rpx; display: flex; flex-direction: row; border-radius: 20rpx; background-color: #ffffff;
					.name{width:100%; height:auto; padding-top:35rpx; padding-left:20rpx;
						.bigtitle{width:100%; font-size:32rpx; font-weight: bold;}
						.subtitle{width:100%; font-size:28rpx; color:#fe653c; margin-top:10rpx;}
					}
					.icon{width:70rpx; height:70rpx; margin-top:40rpx; margin-right: 30rpx; image{width:70rpx; height: 70rpx;}}
				}
				.square:active{background-color: #f0f1f0;}
			}
			.line{width:700rpx; height:100rpx; padding-top:22rpx; padding-left:20rpx; margin-top: 20rpx; border-radius: 20rpx; background-color: #ffffff; display: flex; flex-direction: row; background-image:url(/static/arrowright.png); background-size: 40rpx; background-repeat: no-repeat; background-position: center right;
				.icon{width:60rpx; height:60rpx; padding-top:5rpx; text-align: center; background-color: #eef2fe; border-radius: 30rpx; image{width:50rpx; height:50rpx;}}
				.name{flex:1; padding-left:20rpx; line-height: 60rpx; font-size:32rpx;}
			}
			.line:active{background-color: #f0f1f0;}
		}
	}
</style>
